<template>
  <div class="com-container"
       style="width:100%;height:100%">
    <div class="com-chart"
         style="width:100%;height:100%"
         ref="traffic_ref"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      chartInstance: null,
      allData: null,
      isReady: false
    };
  },
  mounted () {
    this.initChart();
    this.isReady = true
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed () {
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    //初始化echartInstance对象
    initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.traffic_ref);
      const initOption = {
        xAxis: {
          type: 'category'
        },
        yAxis: {
          type: 'value'
        }
      };
      this.chartInstance.setOption(initOption);
    },
    //获取服务器数据 后续接口获取数据方法处
    getData () {
      let chartData = this.dashboardData.libraryDay
      chartData = chartData.map(item => {
        return item
      })
      this.updataChart(chartData);
    },
    //更新图表
    updataChart (ydata) {
      var xnum = [0, 3, 6, 9, 12, 15, 18, 21, 24, 2];
      var ynum = ydata;
      const option = {

        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: 0,
          top: "10%",
          right: "4%",
          containLabel: true,
        },
        xAxis: {
          name: "时间/时",

          axisLabel: {
            show: true,
            fontSize: 12,
            color: "rgba(255, 255, 255, 1)"
          },
          data: xnum,
          boundaryGap: false,

          nameTextStyle: {
            verticalAlign: "top",
            padding: [20, 0, 0, -50],
            // borderRadius: [4, 4, 4, 4],
            // borderWidth: 2.5,
            // borderColor: "rgba(204, 9, 9, 1)",
            color: "rgba(255, 255, 255, 1)",
          },

          axisLine: {
            lineStyle: {
              color: "rgb(116, 215, 226)",
              width: "4",
            },
          },
        },
        yAxis: {
          name: "人数/个",
          axisLine: { show: true, lineStyle: { color: "rgb(116, 215, 226)", width: "4" } },
          axisLabel: { show: true, color: "rgb(116, 215, 226)" },
          splitLine: {
            show: true,
          },
          axisLabel: {
            show: true,
            fontSize: 12,
            color: "rgba(255, 255, 255, 1)"
          },
          nameTextStyle: {

            color: "rgba(255, 255, 255, 1)",
          },
          splitLine: {
            lineStyle: {
              type: "dashed"
            }
          },
          // interval: 100,
          // max: 800
        },
        series: [
          {
            type: "line",
            data: ynum,
            stack: "map",
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(64, 193, 213)"
                },
                {
                  offset: 1,
                  color: "rgb(239, 250, 251)"
                }
              ])
            },
            label: {
              show: true,
              textStyle: {
                color: "rgba(255, 255, 255, 1)",
              },
            },
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
    screenAdapter () {
      const adapterOption = {};
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize;
    },
  }
  ,
  computed: {
    dashboardData () {
      return this.$store.state.dashBoardData
    }
  },
  watch: {
    dashboardData: {
      immediate: true,
      handler: function () {
        if (this.isReady) {
          this.getData();
          console.log("123123")
        }

      }
    }
  }
};
</script>

<style>
</style>